<template>
  <Dialog v-model="visible" title="详 情" width="64%">
    <el-descriptions :column="2">
      <el-descriptions-item label="编 号">
        <el-tag>{{ form.outTradeNo }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="总金额(元)">
        <el-tag>{{ form.totalAmount || 0 }}元</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="交易状态">
        <el-tag>{{ form.tradeStateCn || '待付款' }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="下单时间">
        <el-tag>{{ form.createDateStr }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="类 型">
        <el-tag>{{ form.countItem || '商品订单' }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="支付方式">
        <el-tag>{{ form.payTypeCn || '未支付或其它支付方式' }}</el-tag>
      </el-descriptions-item>
    </el-descriptions>

    <!-- 列表 -->
    <ContentWrap v-if="form.orderItems && form.orderItems.length > 0">
      <el-table :data="form.orderItems" default-expand-all border highlight-current-row stripe>
        <el-table-column type="selection" width="64" />
        <el-table-column type="index" label="序 号" width="80" align="center" fixed />

        <el-table-column
          align="center"
          header-align="center"
          label="商品名称"
          prop="goodsName"
          width="256"
        />

        <el-table-column
          align="right"
          header-align="center"
          label="价格(元)"
          prop="price"
          width="128"
        />

        <el-table-column
          align="right"
          header-align="center"
          label="购买数量"
          prop="quantity"
          width="128"
        />

        <el-table-column
          align="center"
          header-align="center"
          label="货 号"
          prop="goodsSn"
          width="256"
        />
      </el-table>
    </ContentWrap>
    <template #footer>
      <el-button @click="visible = false">取 消</el-button>
    </template>
  </Dialog>
</template>
<script lang="ts" name="PayOrderDetail" setup>
import * as Api from '@/api/userCenter/tradeOrder/tradeOrder'
import { formatDate } from '@/utils/formatTime'

const visible = ref(false) // 弹窗的是否展示
const loading = ref(false) // 表单的加载中
const form = ref({
  id: '',
  outTradeNo: '',
  totalAmount: 0,
  tradeStateCn: ''
})

/** 打开弹窗 */
const open = async (id = '') => {
  visible.value = true
  // 修改时,设置数据
  if (id) {
    loading.value = true
    form.value.id = id
    try {
      let val = await Api.getById(id)
      if (val) {
        form.value = val
      }
    } catch (t) {
      console.log(t)
    } finally {
      loading.value = false
    }
  }
}
defineExpose({ open }) // 提供 open 方法,用于打开弹窗
</script>
<style>
.tag-purple {
  color: #722ed1;
  background: #f9f0ff;
  border-color: #d3adf7;
}

.tag-pink {
  color: #eb2f96;
  background: #fff0f6;
  border-color: #ffadd2;
}
</style>
